.line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.two-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

// $blue: #3366ff;商务蓝
// $green: #369b42;清新绿
// $yellow: #feba00;柠檬黄
// $vibrantblue: #34c8f4;活力蓝
// $red: #e65f4d;热情红
@each $item,
$color in (css-blue, #3366ff),
(css-green, #369b42),
(css-yellow, #feba00),
(css-vibrantblue, #34c8f4),
(css-red, #e65f4d) {
    .#{$item} {
        background-color: $color;
    }
}

// color颜色 示例：cl-blue
@each $item,
$color in (cl-blue, #1890ff),
(cl-green, #52c41a),
(cl-yellow, #faad14),
(cl-red, #f5222d),
(cl-grad, #909399) {
    .#{$item} {
        color: $color;
    }
}

.cursor-poi {
    cursor: pointer;
}

//text-align eg:text-center
@each $item in center, left, right {
    .text-#{$item} {
      text-align: $item;
    }
  }

//margin
@for $i from 0 through 20 {
    .mx-#{$i * 5} {
        margin-right: (5px * $i) !important;
        margin-left: (5px * $i) !important;
    }

    .my-#{$i * 5} {
        margin-top: (5px * $i) !important;
        margin-bottom: (5px * $i) !important;
    }

    .mt-#{$i * 5} {
        margin-top: (5px * $i) !important;
    }

    .mr-#{$i * 5} {
        margin-right: (5px * $i) !important;
    }

    .mb-#{$i * 5} {
        margin-bottom: (5px * $i) !important;
    }

    .ml-#{$i * 5} {
        margin-left: (5px * $i) !important;
    }
}

// pading
@for $i from 0 through 20 {
    .px-#{$i * 5} {
        padding-right: (5px * $i) !important;
        padding-left: (5px * $i) !important;
    }

    .py-#{$i * 5} {
        padding-top: (5px * $i) !important;
        padding-bottom: (5px * $i) !important;
    }

    .pt-#{$i * 5} {
        padding-top: (5px * $i) !important;
    }

    .pr-#{$i * 5} {
        padding-right: (5px * $i) !important;
    }

    .pb-#{$i * 5} {
        padding-bottom: (5px * $i) !important;
    }

    .pl-#{$i * 5} {
        padding-left: (5px * $i) !important;
    }
}
//font-size 12-40 eg:fs-12
@for $i from 6 through 20 {
    .fs-#{$i * 2} {
        font-size: (2px * $i) !important;
    }
}

@for $i from 400 through 600 {
    .fw-#{$i} {
        font-weight: $i;
    }
}